import React, {useEffect, useRef, useState} from "react";
import {Badge, Button, Card, Col, Divider, Row, Space, Tag} from "antd";
import {useModel} from "@@/exports";
import {getMessage, updateStatus} from "@/services/backend/messageController";
import CreateModal from "@/pages/Message/components/CreateModal";
import {waitTimePromise} from "@/pages/Admin/UserManage";
import {ActionType} from "@ant-design/pro-components";
import {NotificationOutlined} from "@ant-design/icons";

const ManagePage: React.FC = ()=> {
  const [userMessage, setUserMessage] = useState<string>("");
  const [createName, setCreateName] = useState<string>("");
  const [goodsId, setGoodsId] = useState<number>(0);
  // @ts-ignore
  const [data, setData] = useState<API.MessageParent[]>([]);
  const [childMessage, setChildMessage]= useState<API.Message[]>([]);
  const [createChatVisible, setCreateChatVisible] = useState<boolean>(false);
  const { initialState } = useModel('@@initialState');
  const { currentUser } = initialState ?? {};
  const myName=currentUser?.userAccount;
  const myId=currentUser?.id;

  const loadData = async ()=>{
    const res=await getMessage(myId??0);
    setData(res);
  }

  useEffect(()=>{
    loadData();
  },[0]);

  return (
    <>
      <Row>
        <Col flex="none">
          <Card title="留言人">
            {
              data.map((item)=>{
                return (
                    <Card
                      onClick={()=>{
                        setChildMessage(item.childMessage)
                        if(myName!==item.createName)
                          setUserMessage(item.createName)
                        else
                          setUserMessage(item.childMessage[0].receiveName as string)
                        setCreateName(item.createName)
                        setGoodsId(item.goodsId)
                        item.msgStatus=0;
                        updateStatus(item.id);
                      }}
                    >
                      <div>
                        {item.createName} : <Tag>{item.goodsName}</Tag>
                        {
                          item.msgStatus===0?
                            <></>
                            : (
                            <Badge dot>
                              <NotificationOutlined style={{ fontSize: 16 }} />
                            </Badge>
                          )
                        }
                      </div>
                      <br/>
                    </Card>
                  );
              })
            }
          </Card>
        </Col>
        <Col flex="auto">
          <Card
            title="留言"
            extra={
              <Button
                onClick={()=>{
                  setCreateChatVisible(true)
                }}
              >
                回复
              </Button>
            }
          >
            {
              childMessage.map((item:API.Message)=>{
                return (
                  <>
                    <Card><Tag>{item.sendName} - {item.receiveName}</Tag> : {item.message}</Card>
                    <br/>
                  </>
                );
              })
            }
          </Card>
        </Col>
      </Row>
      <CreateModal
        modalVisible={createChatVisible}
        sendName={myName??""}
        receiveName={userMessage}
        createName={createName}
        goodsId={goodsId}
        onCancel={() => setCreateChatVisible(false)}
        onSubmit={async ()=>{
          await waitTimePromise(500);
          setCreateChatVisible(false);
          window.location.reload();
        }}/>
    </>
  );
}

export default ManagePage;
